import { ScrollView } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import { AtTabs, AtTabsPane } from 'taro-ui'
import { useState } from 'react'
import { getMyAllOrderList } from '@/api/myOrder'

import styles from './index.module.scss'
import OrderList from './components/OrderList'

export interface OrderDetail {
  content: string
  count: number
  createTime: string
  description: string
  id: number
  imgs: string[]
  note: string
  payMethod: string
  payTime: string
  price: number
  productCover: string
  productId: number
  productName: string
  receiverAddress: string
  receiverName: string
  receiverPhone: string
  status: number
  unit: string
  updateTime: string
  userId: number
  weight: number
  [property: string]: any
}

export default function Order() {
  const [current, setCurrent] = useState(0)
  const [myAllOrderList, setMyAllOrderList] = useState([])
  const [noPayedOrderList, setNoPayedOrderList] = useState([])
  const [hasPayedOrderList, setHasPayedOrderList] = useState([])
  const [hasCanceledOrderList, setHasCanceledOrderList] = useState([])

  const fetchGetMyAllOrderList = async () => {
    try {
      const res = await getMyAllOrderList()
      /** 所有订单 */
      setMyAllOrderList(res.data)

      /** 筛选待支付订单 */
      const filteredNoPayedOrders = res.data.filter(
        (order) => order.status === 0,
      )
      setNoPayedOrderList(filteredNoPayedOrders)

      /** 筛选已支付订单 */
      const filteredHasPayedOrders = res.data.filter(
        (order) => order.status === 2,
      )
      setHasPayedOrderList(filteredHasPayedOrders)

      /** 筛选已取消订单 */
      const filteredHasCanceledOrders = res.data.filter(
        (order) => order.status === 1,
      )
      setHasCanceledOrderList(filteredHasCanceledOrders)
    } catch (error) {
      // 处理错误情况
      console.error('Error fetching order list:', error)
    }
  }

  useLoad(() => {
    fetchGetMyAllOrderList()
  })

  const handleClick = (value) => {
    setCurrent(value)
  }
  return (
    <div className={styles.myOrder}>
      <AtTabs
        current={current}
        tabList={[
          { title: '全部' },
          { title: '待付款' },
          { title: '已付款' },
          { title: '已取消' },
        ]}
        onClick={(index) => handleClick(index)}
      >
        <AtTabsPane current={current} index={0}>
          <ScrollView padding={[87, 0, 0, 0]} scrollY className={styles.scroll}>
            <OrderList
              list={myAllOrderList}
              onUpdate={fetchGetMyAllOrderList}
            />
          </ScrollView>
        </AtTabsPane>
        <AtTabsPane current={current} index={1}>
          <ScrollView scrollY className={styles.scroll}>
            <OrderList
              list={noPayedOrderList}
              onUpdate={fetchGetMyAllOrderList}
            />
          </ScrollView>
        </AtTabsPane>
        <AtTabsPane current={current} index={2}>
          <ScrollView scrollY className={styles.scroll}>
            <OrderList
              list={hasPayedOrderList}
              onUpdate={fetchGetMyAllOrderList}
            />
          </ScrollView>
        </AtTabsPane>
        <AtTabsPane current={current} index={3}>
          <ScrollView scrollY className={styles.scroll}>
            <OrderList
              list={hasCanceledOrderList}
              onUpdate={fetchGetMyAllOrderList}
            />
          </ScrollView>
        </AtTabsPane>
      </AtTabs>
    </div>
  )
}
